<template>
  <div class="page">
    <div class="setting">
      <div class="title-contianer">
        个人设置
      </div>
      <div class="setting-item">
        <span>用户名称:{{ userInfo.nickname || '-' }}</span>
        <div class="edit-button" @click="onEditName">
          <img src="@i/icon/edit-icon.png" class="edit-icon">
          编辑
        </div>
      </div>
      <div class="setting-item">
        <span>手机号:{{ userInfo.mobilePhone || '-' }}</span>
        <div class="edit-button" @click="onEditPhone">
          <img src="@i/icon/edit-icon.png" class="edit-icon">
          编辑
        </div>
      </div>
    </div>
  </div>
  <a-modal v-model:visible="showModal" title="修改用户名称" width="560px" @Cancel="onClose">
    <div class="modal-container">
      <div class="form-item">
        <span class="form-item-title">新的用户名称:</span>
        <a-input v-model:value="newName" placeholder="请输入" />
      </div>
    </div>
    <template #footer>
      <div class="g-modal-buttons">
        <div class="g-close-button" @click="onClose">
          取消
        </div>
        <div class="g-submit-button" @click="onSubmit">
          提交
        </div>
      </div>
    </template>
  </a-modal>
  <ResetPhone @ok="onClosePhone" @close="onClosePhone" :mobilePhone="userInfo.mobilePhone" :visible="showPhoneModal">
  </ResetPhone>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { search } from '@r/api/product'
import { getSheinTypeTree, getSheinType } from '@r/api/productType'
import { getUserInfo, sendCaptcha, bindMobilePhone, updateNickname } from '@r/api/user'
import { message } from 'ant-design-vue'
import ResetPhone from '@c/ResetPhone/index.vue'
let userInfo = ref<any>({})
let showModal = ref<boolean>(false)
let showPhoneModal = ref<boolean>(false)
let newName = ref<string>('')
onMounted(() => {
  handleUserInfo()
})
function onEditName() {
  newName.value = ''
  showModal.value = true
}
function onEditPhone() {
  showPhoneModal.value = true
}
function onClose() {
  showModal.value = false
}
function onClosePhone() {
  showPhoneModal.value = false
  handleUserInfo()
}
function onSubmit() {
  if (!newName.value) {
    message.warn('请输入')
  }
  updateNickname({
    nickname: newName.value
  }).then(res => {
    console.log(res);
    showModal.value = false
    handleUserInfo()
  })
}
function handleUserInfo() {
  let token = localStorage.getItem('token')
  if (!token) {
    return
  }
  // tokenStr.value = token
  getUserInfo()
    .then((res: any) => {
      localStorage.setItem('DMPhone', res.mobilePhone)
      // nickname.value = res.nickname || ''
      // avatarPath.value = res.avatarPath || ''
      userInfo.value = res
    })
}
</script>

<style scoped lang="less">
.page {
  display: flex;
  flex-direction: row;
  // height: calc(100vh - 100px);
  height: 100%;
  align-items: center;
}

.setting {
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 220px;
  border-radius: 10px;
  margin: 16px 0 0 10px;
  padding: 0px 20px 0 20px;
  width: 100%;
  border-radius: 10px;

  .title-contianer {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0em;
    color: #3D3D3D;
    width: 100%;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .setting-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0px;
    color: #333333;
  }

  .edit-button {
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0em;
    color: #FF6923;
    cursor: pointer;
    margin-left: 20px;
  }

  .edit-icon {
    height: 14px;
    width: 14px;
    margin-right: 11px;
  }
}

.form-item {
  display: flex;
  flex-direction: row;
  // margin-top: 20px;

  .form-item-title {
    /* 描述要反馈的内容 */
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0px;
    color: #666666;
    // margin-bottom: 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 4px;
  }
}
</style>